<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单结算</title>
    <link rel="stylesheet" href="/assets/home/css/mui.min.css" />
    <link rel="stylesheet" href="/assets/home/plugin/picker/css/mui.picker.min.css">
    <link rel="stylesheet" href="/assets/home/css/animate.min.css" />
    <link rel="stylesheet" href="/assets/home/css/reset.css" />
    <link rel="stylesheet" href="/assets/home/css/confirm.css">
    <script src="/assets/home/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/home/js/mui.min.js"></script>
    <script src="/assets/home/plugin/picker/js/mui.picker.min.js"></script>
    <script src="/assets/home/js/wow.min.js"></script>
</head>

<body>
    <form method="post">
        <div class="course wow">
            <div class="left">
                <div class="thumb">
                    <img src="{$subject.thumbs_text}" alt="">
                </div>
            </div>
            <div class="right">
                <div class="name">{$subject.title}</div>
                <div class="teacher">授课老师：{$subject.teacher.name}</div>
                <div class="type">课程分类：{$subject.category.name}</div>
            </div>
        </div>

        <div class="coupon-info wow" data-wow-delay="100ms">
            <div class="text">
                优惠券：
            </div>
            <a href="javascript:void(0)">
                <div class="coupon">
                    <!-- 抵扣￥0元 <span>></span> -->
                    {empty name='coupons'}
                    暂无优惠券 <span>></span>
                    {else /}
                    请选择优惠券 <span>></span>
                    {/empty}
                </div>
                <input type="hidden" name="coupon" value="0">
            </a>
        </div>
        <div class="price-info wow" data-wow-delay="200ms">
            <div class="text">
                课程价格：
            </div>
            <div class="price">
                ￥{$subject.price}
            </div>
        </div>

        <div class="pay-info wow" data-wow-delay="300ms">
            <div class="text">
                支付方式：
            </div>
            <a href="javascript:void(0)">
                <div class="pay">
                    余额:{$money}元
                </div>
                <input type="hidden" name="payType" value="money">
            </a>
        </div>

        <div class="footer wow" data-wow-delay="400ms">
            <div class="total">
                总价：<span>￥{$subject.price}</span>
            </div>
            <button class="btn">提交</button>
        </div>
    </form>
</body>

</html>
<script>
    var picker = new mui.PopPicker();

    $('.coupon').click(()=>{
        picker.setData([
            {value:'0',text:'不使用优惠券',rate:1},
            {foreach $coupons as $coupon}
            {value:'{$coupon.id}',text:'{$coupon.title}：{$coupon.rate*100%10?$coupon.rate*100:$coupon.rate*10}折',rate:{$coupon.rate}},
            {/foreach}
        ]);
        picker.show(function (coupon) {
            $('.coupon').text(coupon[0].text)
            $("input[name='coupon']").val(coupon[0].value)
            $('.total span').text('￥'+({$subject.price}*coupon[0].rate).toFixed(2))
        })
    })
    $('.pay').click(()=>{
        picker.setData([
            {foreach $payTypes as $type=>$name}
            {value:'{$type}',text:'{$name}'},
            {/foreach}
        ]);
        picker.show(function (payType) {
            if(payType[0].value=='money'){
                $('.pay').text(payType[0].text+':{$money}元')
            }else{
                $('.pay').text(payType[0].text)
            }
            $("input[name='payType']").val(payType[0].value)
        })
    })



    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: null // 可选滚动容器选择器，否则使用窗口
    }).init();
</script>